function setUserName() {
    let username = localStorage.getItem('username')
    const userbox = document.querySelector('.username')
    if (username) {
        userbox.innerHTML = username
    } else {
        userbox.innerHTML = ''
    }
}
setUserName()
async function getstudentData() {
    let toten = localStorage.getItem('token')
    try {
        let res = await axios({
            url: '/dashboard',
            // 接口文档中只要看到Header参数请求就用headers
            // headers: {
            //     Authorization: toten
            // }
        })
        let { overview, year, salaryData } = res.data.data
        for (key in overview) {
            document.querySelector(`.${key}`).innerHTML = overview[key]
        }
        console.log(res.data.data);
        renderLine(year)
        renderSalary(salaryData)

    } catch (err) {
        // console.log(err.response.status);

        // 如果err.response.status 等于401表示服务器验证token失败
        // 此时应该跳转到登入页面，让用户重新去登录获取新token（重走一遍登录逻辑）
        // if (err.response.status == 401) {
        //     pxmu.fail('登录过期，请重新登录')
        //     // 设置定时器，让用户先知道警告框后再跳转
        //     setTimeout(() => {
        //         location.href = './login.html'
        //     }, 2000)
        // }
    }
}
getstudentData()

document.querySelector('#logout').addEventListener('click', function () {
    localStorage.removeItem('username')
    localStorage.removeItem('token')
    pxmu.fail('即将为您退出登录')
    setTimeout(() => {
        location.href = './login.html'
    }, 1000)
})

// 学科薪资走势表格
function renderLine(year) {
    var myChart = echarts.init(document.getElementById('line'));
    option = {
        title: {
            text: '2022全学科薪资走势',
            textStyle: {
                fontSize: 16
            },
            left: 10,
            top: 10
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: year.map(item => item.month),
            lineStyle: {
                type: 'dashed'
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                data: year.map(item => item.salary),
                symbolSize: 10,
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 5,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0, color: '#479dee' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5c75f0' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#b2d7f7' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 班级薪资分布饼图
function renderSalary(salaryData) {
    var myChart = echarts.init(document.getElementById('salary'))
    const option = {
        title: {
            text: '班级薪资分布',
            left: 10,
            top: 15
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '90%',
            left: 'center'
        },
        series: [
            {
                name: '班级薪资分布',
                type: 'pie',
                radius: ['55%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: salaryData.map(item => {
                    return {
                        value: item.b_count + item.g_count,
                        name: item.label
                    }
                })
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}